import React from 'react';
import { observer } from 'mobx-react';
import PropTypes from 'prop-types';
import Icon from 'components/icon';
import css from './index.less';
import classnames from 'classnames';

@observer
export default class Options extends React.Component {
  static propTypes = {
    options: PropTypes.array,
    onChange: PropTypes.func,
  };
  static defaultProps = {
    options: [],
    onChange: () => {},
  };

  render() {
    const { options, onChange } = this.props;

    return (
      <div className={css.list}>
        {
          options.map((item, index) => {
            const _props = {
              key: index,
              className: classnames(css.item, {
                [css.selected]: item.selected,
              }),
              disabled: item.disabled,
              onClick: (e) => {
                e.stopPropagation();
                if (!item.disabled) {
                  onChange(item);
                }
              }
            };
            return (
              <div {..._props}>
                <Icon type={item.icon} className={css.icon} />
                <div className={css.label}>{item.label}</div>
              </div>
            );
          })
        }
      </div>
    );
  }
}
